<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>职位（角色）管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">


</head>
<body>
   <!--根标签一定要存在，和Vue对象进行绑定-->
   <div id="app">
        <!--搜索-->
       <el-row>
           <el-col :span="4">
               <el-input v-model="searchForm.roleName" placeholder="请输入职位名称"  size="mini"></el-input>
           </el-col>
           <el-col :span="4">
               <el-input v-model="searchForm.remark" placeholder="请输入描述"  size="mini"></el-input>

           </el-col>
           <el-col :span="4">
               <el-select v-model="searchForm.status" placeholder="请选职位状态" size="mini">
                   <el-option label="启用" value="1"></el-option>
                   <el-option label="禁用" value="0"></el-option>
               </el-select>
           </el-col>
           <el-col :span="6">
               <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
               <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="handlerAdd">添加</el-button>
               <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
           </el-col>

           <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
           <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>

       <!--表格数据  : 相当于v-bind: -->
       <el-table
               :data="tableData"
               style="width: 100%">
           <!--表格的列   prop 组件   父作用域向子作用域传值-->
           <el-table-column
                   prop="roleName"
                   label="职位名称"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="remark"
                   label="描述"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="status"
                   :formatter="getStatus"
                   label="状态">
           </el-table-column>
           <el-table-column label="操作">
               <template slot-scope="scope">
                   <el-button
                           size="mini"
                           @click="givePerms(scope.$index, scope.row)">角色授权</el-button>
                   <el-button
                           size="mini"
                           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                   <el-button
                           size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
               </template>
           </el-table-column>
       </el-table>

       <!--分页-->
       <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[2,3,5,10,15,100]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
       </el-pagination>


       <!--部门添加/更新对话框-->
       <el-dialog :title="title" :visible.sync="dialogFormVisible">
           <el-form :model="form" :rules="rules" ref="form">
               <el-form-item label="部门名称" prop="deptName" :label-width="formLabelWidth">
                   <el-input v-model="form.deptName" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="部门描述"  prop="loc" :label-width="formLabelWidth">
                   <el-input v-model="form.loc" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="部门状态" prop="status" :label-width="formLabelWidth">
                   <el-select v-model="form.status" placeholder="请选部门状态">
                       <el-option label="启用" value="1"></el-option>
                       <el-option label="禁用" value="0"></el-option>
                   </el-select>
               </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="submitForm('form')">确 定</el-button>
           </div>
       </el-dialog>

       <!--角色授权弹出框-->
       <el-dialog title="权限菜单" :visible.sync="menuTreeVisible">
           <el-tree :data="data"
                    :props="defaultProps"
                    node-key="id"
                    show-checkbox
                    ref="menuTree"
                    :check-strictly = "true"
                    :default-checked-keys="nodeChecked"
                    default-expand-all
           ></el-tree>
           <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="addRoleAndMenus()">确 定</el-button>
           </div>
       </el-dialog>
   </div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>
    var app =new Vue({
        el:"#app",
       /* data:{

        }*/
        data:function () {
           return{
               data:[],//权限树数组对象
               defaultProps: {//父对象传值
                   children: 'children',
                   label: 'label'
               },
               nodeChecked:[], //勾选项目数组对象
               roleId:0, //因为角色ID在不同的js方法种使用，定义为全局的
               menuTreeVisible:false,//权限树是否显示
               tableData: [],//table数据
               currentPage:1,//第几页  页码
               pageSize:2,//每页显示数量
               total:100,//分页数据总数量
               searchForm:{roleName:'',remark:'',status:''},  //查询对象
               title:'部门添加',//弹出对话框标题
               dialogFormVisible: false, //是否显示对话框  默认是不显示
               form:{deptName:'',loc:'',status:'1'},//form表单对象
               formLabelWidth: '120px',
               rules: {
                   deptName: [
                       { required: true, message: '请输入部门名称', trigger: 'blur' },
                       { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                   ] ,
                   loc : [
                       { required: true, message: '请输入部门描述', trigger: 'blur' },
                       { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                   ],
                   status: [
                       { required: true, message: '请选择部门状态', trigger: 'change' }
                   ]
               }
           }
        },
        created:function () { //初始化方法 类似于jquery  $({})
               this.loadData();
        },
        methods: { //定义所有元素绑定的方法
            //加载数据方法
            loadData(){
                //让_this等于当前vue对象
                var _this = this;
                // alert(111);
                //赋值 axios官网代码
                axios.post('/role/queryByParam',{pageNo:this.currentPage,pageSize:this.pageSize,data:this.searchForm})  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if(response.data.code==200){
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            //刷新
            refresh(){
                //原始js重新请求
                 location.reload();
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //再次请求，加载数据
                 this.loadData();
            },
            //当前页发生变化时执行方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);

                this.currentPage =val;
                //再次请求，加载数据
                this.loadData();
            },
            //获取部门状态  把状态数字，转换为字符
            getStatus(row, column, cellValue, index){
                //cellValue   status的值
               /* var returnValue = '';
                if(cellValue==1){
                    returnValue= "启用";
                }else{
                    returnValue= "禁用";
                }
                return returnValue;*/
               return cellValue==1?"启动":"禁用";
            },
            //部门搜索方法
            search(){
                //直接调用重新请求，加载数据方法
                this.loadData();
            },
            //角色授权
            givePerms(index, row) {
                //弹出框，显示权限树，根据该角色对应的权限，让权限树默认勾选响应的值
                //给角色ID复制
                this.roleId=row.roleId;
                //根据角色ID查出权限菜单ID，赋值给nodeChecked
                _this =this;
                //初始化数据,把菜单树数据加载
                axios.get('/menu/queryTreeNodeData')
                    .then(function (response) {
                    /*   $.ajax(url:'',async:false) //默认同步
                        _this.data=tmpData;*/
                        let tmpData=response.data.data;
                       // _this.data=response.data.data;
                        //查询并给勾选项赋值
                        axios.get('/role/queryMenuIdListByRid?positionId='+_this.roleId)
                            .then(function (response) {
                                _this.data=tmpData;
                                _this.nodeChecked=response.data.data;
                            });
                    });

                //显示权限菜单对话框
                this.menuTreeVisible=true;
            },
            //添加角色(职位)和权限关联
            addRoleAndMenus(){
                //获取重新选中的节点
                let nodes = this.$refs.menuTree.getCheckedNodes();
                //判断至少选中一个节点
                if(nodes.length<1){
                    this.$message.error("至少选中一个节点");
                    return;// 让代码终止运行
                }
                let tempMenuIds="";
                //循环遍历
                for (var i = 0; i < nodes.length; i++) {
                    tempMenuIds+=nodes[i].id+",";
                }
                //tempMenuIds="100,101,102,200,201,"  拼接后最后加,  去掉最后一个逗号
                tempMenuIds=tempMenuIds.substr(0,tempMenuIds.length-1);
                //tempMenuIds="100,101,102,200,201"
                alert("当前角色为："+this.roleId+"，该角色对应新的权限ID为："+tempMenuIds);
                _this =this;
                //执行后台添加方法
                axios.post('/role/addPosAndMenu?posId='+this.roleId+"&menuIds="+tempMenuIds).then(function (response) {
                    console.log(response);
                    if(response.data.code == 200){
                            //提示成功
                            _this.$message({
                                type: 'success',
                                message: '授权成功!'
                            });
                            //关闭弹框
                            _this.menuTreeVisible=false;
                            //重新加载数据
                            _this.loadData();

                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("你错了。。。");
                });
            },
            //处理更新
            handleEdit(index, row) {
                //row  当前行数据 如果是第一行  row = {deptId:1,deptName:'管理部',description:'店长的事',status:1}
                console.log(index, row);
                //显示对话框
                this.dialogFormVisible=true;
                //指定对话框标题
                this.title = '部门更新';
                //把一行数据赋值给form赋值
                this.form = row;
                //把数字1变为字符串1
                this.form.status = row.status+'';
            },
            //处理删除
            handleDelete(index, row) {
                console.log(index, row);
                //确认框提示
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                    // alert(111);
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.delete("/dept/deleteById?deptId="+row.deptId)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if(response.data.code==200){
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //处理添加
            handlerAdd(){
                //显示对话框
                this.dialogFormVisible=true;
                //指定对话框标题
                this.title = '部门添加';
                //让form表单重新赋空值
                this.form={};
            },
            //提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var  url  = "";
                       if(this.title=='部门添加'){
                           url='/dept/add';
                       }else{
                           url='/dept/update';
                       }
                        //让_this等于当前vue对象
                        var _this = this;
                        // alert(111);
                        //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                        axios.post(url,this.form)  //指定请求的url及参数  get
                            .then(function (response) {  //正确返回对象的处理
                                // handle success
                                console.log(response);
                                //JSON.stringify   把json转换为json字符串，方便查看
                                console.log(JSON.stringify(response));
                                //直接使用this 会指 axios对象  错误
                                // this.tableData
                                //判断返回值是否正确
                                if(response.data.code==200){
                                    //关闭弹框
                                    _this.dialogFormVisible=false;
                                    //提示添加成功
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    //错误提示信息
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }

                            })
                            .catch(function (error) {//错误的处理
                                // handle error
                                console.log(error);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
</html>